<template>
	<view class="page">
		<view class="header">
			<view class="setAva" @click="confirm()">
				<uni-card title="头像" :thumbnail="(avatar===''|avatar==='#')?pre:avatar" extra="修改头像">
					<!-- <text>头像</text>
					<br>
					<image :src="(avatar===''|avatar==='#')?pre:avatar"></image>
					<uni-icons type="forward" size=24 ></uni-icons>
					<hr> -->
				</uni-card>
			</view>
			<view class="setAcc">
				<uni-card>
					<text>账号</text>
					<view style="float:right">
						<text style="font-size: 16px;">{{account}}</text>
						<uni-icons :type="type?'eye':'eye-slash'" size=24 @click="see"></uni-icons>
					</view>
				</uni-card>
			</view>
			<view class="setInfo">
				<uni-card>
					<text>修改个人信息</text>
					<uni-icons @click="updateinfo()" type="forward" size=24></uni-icons>
				</uni-card>
			</view>
		</view>
		<view class="btn-v">
			<button class="btn" type="warn" @click="exit">退出登录</button>
		</view>
		
	</view>
</template>

<script>
	import request from '@/utils/api.js'
	export default {
		onLoad(){
			let userInfo = uni.getStorageSync('userInfo')
			this.phone = userInfo.phone
			let phone = userInfo.phone
			let substr = phone.substr(2,phone.length-4)
			this.account = phone.replace(substr,'*******')
			this.avatar = userInfo.avatar
		},
		data(){
			return {
				pre:'/static/mine/image/avatar.jpeg',
				avatar:'',
				phone:'',
				account:'',
				type:false
			}
		},
		methods:{
			// 刷新用户信息
			refreshUserInfo() {
				request('/my/info').then(resp => {
					console.log(resp);
					uni.setStorage({
						key: 'userInfo',
						data: resp.user
					})
				})
			},
			
			confirm() {
				let that = this
				uni.showModal({
					title:'提示',
					confirmText:'修改头像',
					cancelText:'取消修改',
					content:'是否确认修改头像？',
					success(res) {
						if (res.confirm) {
							that.unpdateAvatar()
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				})			
			},
			unpdateAvatar(){
				let that = this
				uni.chooseImage({
					sourceType:['album'],
					success: function(chooseImageRes){
						const tempFilePaths = chooseImageRes.tempFilePaths
						let key = `upload_pic_${new Date().getTime()}`
						// console.log('路径',tempFilePaths)
						//获取上传凭证
						request('/oss/auth').then(resp=>{
							let uploadToken = resp.data
							uni.uploadFile({
								url:'http://upload-z2.qiniup.com',
								filePath:tempFilePaths[0],
								name:'file',
								formData:{
									'token': uploadToken,
									'key': key
								},
								success: (res)=>{
									let url = JSON.parse(res.data).fileUrl
									that.avatar = url
									//更新一下userInfo
									let userInfo = uni.getStorageSync('userInfo')
									userInfo.avatar = that.avatar
									uni.setStorage({
										key:'userInfo',
										data:userInfo
									})
									
									// 提交给后端
									request('/my/info', {
										'avatar': url
									}, 'POST').then(postResp => {
										console.log(postResp);
									})
									// 刷新用户信息
									that.refreshUserInfo()
								},
								fail: (err)=>{
									console.log('err', err);
								}
							})
						})
						
					},
					fail: (err) => {
						uni.showToast({
							title: "提交失败",
							
						})
					}
				})
			},
			see(){
				this.type = !this.type
				if(this.type){
					this.account = this.phone
				}else{
					let phone = this.phone
					let substr = phone.substr(2,phone.length-4)
					this.account = phone.replace(substr,'*******')
				}
			},
			set(){
				uni.navigateTo({
					url: '/pages/mine/settel',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			updateinfo(){
				uni.navigateTo({
					url: '/pages/mine/updateinfo',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			exit(){
				request('/logout',{},'POST').then((res)=>{
					console.log('res',res)
					if(res.code!==200){
						uni.showToast({
							icon:'error',
							title: '退出登录失败'
						});
						return
					}
					uni.clearStorage()
					uni.clearStorageSync()
					uni.showToast({
						title: '退出登录成功'
					});
					uni.reLaunch({
						url: '/pages/login/login',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}).catch(err=>{
					console.log('err',err)
				})
			}
		}
	}
</script>

<style scoped>
	.header{
		width: 90vw;;
		height: 300px;
		margin:10px auto;
		display: flex;
		flex-direction: column;
	}
	image{
		width: 50px;
		height: 50px;
		border-radius: 45px;
		float:right;
		margin:30px;
	}
	.uni-icons{
		float:right;
		padding:0px 0px 20px 10px;
	}
	text{
		font-size: 20px;
	}
	.btn-v{
		width: 100vw;
		height: 30px;
	}
	.btn{
		width: 80vw;
		margin: 10px auto;
	}
	
</style>